<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="sl" tagdir="/WEB-INF/tags" %>
<%@page import="com.solution.common.config.PublicConfig"%>
<%@page import="com.solution.admin.home.constants.IndexConstants"%>
<%
	String basePath = PublicConfig.ROOT_PATH;
	String imgRootURL = PublicConfig.IMG_ROOT_URL;
	String ossImgZoomWX = PublicConfig.OSS_IMG_ZOOM_WX; //微信图片缩放
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics_wx/css/style.css">
<script type="text/javascript" src="<%=basePath%>/statics_wx/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics_wx/js/js.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics_wx/js/custom.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics/plugins/layer/layer.js"></script>

<script type="text/javascript"> 
	$(function(){
		//系统域名 
		var rootPath = '<%=basePath%>';
		// 系统上传文件展示域名
		var imgRootURL = '<%=imgRootURL%>';
		
		// 赠品
		$('.zp_btn').click(function(){
			var gift_list = $(this).find("#gift_list_str").html();
			$("#zp_box").find("#gift_list").html(gift_list);
			$('#zp_box').toggle();
		});
		
		$('#zp_box .bottom p .inputbtn1').click(function(){
			$('#zp_box').toggle();
		});
		
		// 促销
		$('.cx_btn').click(function(){
			var prmotion_type = $(this).find("#promotion_desc em").text()
			var prmotion_desc = $(this).find("#promotion_desc b").text()
			$("#cx_box").find("#promotion_type").text(prmotion_type);
			$("#cx_box").find("#promotion_desc").text(prmotion_desc);
			$('#cx_box').toggle();
		});
		
		$('#cx_box .bottom p .inputbtn1').click(function(){
			$('#cx_box').toggle();
		});
		
		
		// 商品选中
		$('.cart_item_con1 ul li .box3 i').click(function(){
			$(this).toggleClass('current')
			cacaluteShoppingCartMoney();
		});
		
		
		// 全选
		$("#btn_select_all").click(function(){
			$(this).toggleClass('current')
			if($(this).attr("class") == 'current'){
				$("i[product_id]").each(function(){
					$(this).addClass('current')
				});	
			}else{
				$("i[product_id]").each(function(){
					$(this).removeClass('current')
				});		
			}
			cacaluteShoppingCartMoney();
		});
		
		// 编辑购物车
		$('#editbtn').click(function(){
			$(this).parent().toggleClass('current');
			$("i[product_id]").each(function(){
				$(this).removeClass("current");
			});
			$("#btn_select_all").removeClass("current");
			// TODO
			// $('.cart_item_con1 ul li .box3 .item-info h3').toggleClass('current');
			$('.cart_bottom2_con b').toggleClass('current');
			$('.cart_bottom2_con p').toggleClass('current');
		});
		// 完成编辑
		$("#donebtn").click(function(){
			$(this).parent().toggleClass('current');
			$("i[product_id]").each(function(){
				$(this).addClass("current");
			});
			$("#btn_select_all").addClass("current");
			// TODO
			// $('.cart_item_con1 ul li .box3 .item-info h3').toggleClass('current');
			$('.cart_bottom2_con b').toggleClass('current');
			$('.cart_bottom2_con p').toggleClass('current');
			cacaluteShoppingCartMoney();
		});
		
		// 规格项的选中状态 
		function initSpecCheck(){
			$('.good_sxlist ul li label').click(function(){
				var spec_box = $(this).closest("#goods_editbox");
				var product_base_price = spec_box.find("#tmp_product_base_price").val();
				var spec_price = $(this).attr("spec_price");
				if($(this).hasClass('checked')){
					$(this).addClass('checked');
				}else{
					$(this).addClass('checked');
					$(this).parent().siblings().find('label').removeClass('checked');
				}
				var tmp_product_price = product_base_price;
				$("#spec_container").find("div[name='spec_list']").each(function(){
					var spec_name= $(this).find("h3").text();
					var select_li = $(this).next("div.bd").find("label.checked");
					select_li.each(function(){
						tmp_product_price = parseFloat(tmp_product_price) + parseFloat($(this).attr("spec_price")); 
					});
				});
				$("#tmp_product_price").html("￥<em>"+numberInteger(tmp_product_price)+"</em>"+numberDecimal(tmp_product_price));
			});
		}
		initSpecCheck();
		
		
		// 判断选择 规格值是存在 
		function checkExists(spec_id, specList,spec_value){
			var flag = false;
			for(var i = 0 ;i < specList.length ; i++){
				var spec = specList[i];
				if(spec.id == spec_id && spec.specValue == spec_value){
					flag = true;
				}
			}
			return flag;
		}
		
		// 关闭商品规格项筛选弹层
		$("#btn_close_product_spec").click(function(){
			$('#goods_editbox').toggle();
		});
		
		
		
		// 规格项修改
		$("h3[id='product_spec_show']").each(function(){
			$(this).click(function(){
				if($(this).attr("class") != "current"){
					return false;
				}
				var item_id = $(this).find("#item_id").val();
				var product_id = $(this).find("#product_id").val();
				var product_name = $(this).find("#product_name").val();
				var product_spec = $(this).find("#spec_json").text();
				// 基价 - 客户差价
				var product_price = $(this).find("#product_price").val();
				// 基价
				var product_base_price = $(this).find("#product_base_price").val();
				var product_image = imgRootURL+$(this).find("#product_image").val();
				var buy_num = $(this).parent().find("#v_buy_num").val();
				
				$("#tmp_item_id").val(item_id);
				$("#tmp_product_id").val(product_id);
				$("#tmp_product_name").text(product_name);
				$("#tmp_product_image").attr("src",product_image);
				$("#tmp_product_price").html("￥<em>"+numberInteger(product_price)+"</em>"+numberDecimal(product_price));
				$("#tmp_product_base_price").val(product_price);
				$("#v_buy_num_2").val(buy_num);
				
				var spec_json = eval(product_spec);
				if(!spec_json){
					spec_json = [];
				}
				
				// 查询商品规格项
				// 添加购物车
				var url = rootPath + "/wx/product/listProductSpec";
				var params = {
					productId : product_id
				};
				$.ajax({
					type : "post",
					url : url,
					data : params,
					datatype : "json",
					success : function(json) {
						if(json){
							$("#spec_container").html("");
							var has_spec = json.has_spec;
							if(has_spec == "true"){
								// 商品规格 
								var product_spec = json.product_spec;
								for(var i = 0 ; i < product_spec.length; i++){
									var spec = product_spec[i];
									var spec_value_list = spec.productSpecList;
									
									var spec_value_str = "";
									for(var j = 0; j <spec_value_list.length; j++){
										var spec_value = spec_value_list[j];
										spec_value_str += 
											"<li>"+
			                        			"<label "+(checkExists(spec_value.id,spec_json,spec_value.specValue) ? "class='checked'" : "")+" spec_id=\""+spec_value.id+"\" spec_price=\""+spec_value.specPrice+"\">"+spec_value.specValue+"</label>"+
				                        	"</li>";
									}
									
									var product_spec_str = ""+ 
											"<div name=\"spec_list\" class=\"hd\">"+
							            		"<h3>"+spec.specName+"</h3>"+
								            "</div>"+
								            "<div class=\"bd\">"+
								            	"<div class=\"good_sxlist\">"+
								                	"<ul>"+
								                		spec_value_str+
								                    "</ul>"+
								                "</div>"+
								            "</div>";
									$("#spec_container").append($(product_spec_str));
									initSpecCheck();
								}
							}
							$('#goods_editbox').toggle();
						}
					},
					error : function() {
						layer.msg('暂时无法查询商品规格项',{time:1000});
					}
				});
			});
		});
		
		
		
		// 编辑购物车数量
		$(".edit_buy_num").click(function(){
			var flag = $(this).attr("flag");
			var id = $(this).parent().find("#item_id").val();
			var productId = $(this).parent().find("#product_id").val();
			var item_buy_num = $(this).parent().find("#v_buy_num");
			var buyNum = null;
			if('add' == flag){
				buyNum = parseInt(item_buy_num.val()) + 1;
			}else if('reduce' == flag){
				if(parseInt(item_buy_num.val()) > 1){
					buyNum = parseInt(item_buy_num.val()) - 1;
				}else{
					buyNum = 1;
					item_buy_num.val("1");
				}
			}
			item_buy_num.val(buyNum);
			editBuyNum(id, productId, buyNum);
		});
		
		// 手动修改购物车数量
		$("input[id='v_buy_num']").each(function(){
			$(this).blur(function(){
				var container = $(this).closest("b");
				var id = container.find("#item_id").val();
				var productId = container.find("#product_id").val();
				var buyNum = container.find("#v_buy_num").val();
				if(isInteger(buyNum)){
					if(buyNum && parseInt(buyNum) <= 1){
						container.find("#v_buy_num").val("1");
						buyNum = 1;
					}	
				}else{
					container.find("#v_buy_num").val("1");
					buyNum = 1;
				}
				editBuyNum(id, productId, buyNum);
			});
		});
		
		// 修改购物车数量
		function editBuyNum(id, productId, buyNum){
			//设置为选中
			$("i[product_id='"+id+"']").addClass('current');
			
			var url = rootPath + "/wx/shoppingcart/editBuyNum";
			var params = {
				id : id,
				productId : productId,
				buyNum : buyNum
			};
			$.ajax({
				type : "post",
				url : url,
				data : params,
				datatype : "json",
				success : function(json) {
					if (json.resultCode != '1') {
						//layer.msg('商品添加到购物车');
						layer.msg('修改购物车失败',{time:1000});
					}else{
						// 计算页面购物车金额
						var total_shopping_cart_money = 0.0;
						
						$("b[name='shopping_num']").each(function(){
							var item_id = $(this).find("#item_id").val();
							if ($("i[product_id='"+item_id+"']").hasClass("current")) {
								var product_price = parseFloat($(this).find("#product_price").val());
								var buyNum = parseFloat($(this).find("#v_buy_num").val());
								var total_product_price = product_price * buyNum;
								total_shopping_cart_money = total_shopping_cart_money + total_product_price;
							}
						});
						
						var tmpMoney =numberRand2(total_shopping_cart_money);
						$("#shopping_cart_total_money").html("￥<i>"+numberInteger(tmpMoney)+"</i>"+numberDecimal(tmpMoney));
						
						//更新购物车数量
						doGetShopCount();
					}
				},
				error : function() {
					layer.msg('修改购物车失败',{time:1000});
				}
			});
			
		}
		
		

		// 计算购物车价格
	 	function cacaluteShoppingCartMoney(){
	 		var shopping_cart_money = 0;
			$("i[product_id].current").each(function(){
				shopping_cart_money = shopping_cart_money + parseFloat($(this).parent().find("#product_price").val())*parseFloat($(this).parent().find("#v_buy_num").val());
			});
			$("#shopping_cart_total_money").html("￥<i>"+numberInteger(shopping_cart_money)+"</i>"+numberDecimal(shopping_cart_money));
	 	}
		
		// 修改规格项时，弹层中修改数量
		// 减少购买数量
		$("#btn_reduce_buy_num_2").click(function(){
			var buy_num = $("#v_buy_num_2").val();
			if(buy_num != 1){
				$("#v_buy_num_2").val(parseInt(buy_num)-1);
			}
		});
		// 增加购买数量
		$("#btn_add_buy_num_2").click(function(){
			var buy_num = $("#v_buy_num_2").val();
			$("#v_buy_num_2").val(parseInt(buy_num)+1);
		});
		
		// 删除购物车item
		$("#btn_delete").click(function(){
			var ids = [];
			$("i[product_id].current").each(function(){
				ids.push($(this).attr("product_id"));
			});
			if(ids.length == 0){
				layer.msg('请选择要删除的商品',{time:1000});
				return false;
			}
			var url = rootPath + "/wx/shoppingcart/deleteCartItem";
			var form = $('<form></form>');  
		    form.attr('action', url);  
		    form.attr('method', 'post');
		    form.attr('target', '_self');
		    form.appendTo("body");
		    form.append($("<input type='hidden' name='ids' value='"+ids.join(",")+"'/>"));
		    form.submit();
		});
		
		// 修改购物车商品规格项
		$("#btn_modify_product_spec").click(function(){
			var item_id = $("#tmp_item_id").val();
			var product_id = $("#tmp_product_id").val();
			var spec = [];
			
			$("#spec_container").find("div[name='spec_list']").each(function(){
				var spec_name= $(this).find("h3").text();
				var select_li = $(this).next("div.bd").find("label.checked");
				var selected_num = select_li.length;
				if(selected_num == 0){
					layer.msg('请选择'+spec_name,{time:2000});
					flag = false;
				}else{
					select_li.each(function(){
						spec.push({id:$(this).attr("spec_id"),specName:spec_name,specValue:$(this).text()});
					});
				}
			});
			var buy_num = $("#v_buy_num_2").val();
			
			var url = rootPath + "/wx/shoppingcart/editItemSpec";
			var params = {
				id : item_id,
				productId : product_id,
				specListJson : JSON.stringify(spec),
				buyNum : buy_num
			};
			
			$.ajax({
				type : "post",
				url : url,
				data : params,
				datatype : "json",
				success : function(json) {
					if (json.resultCode == '1') {
						// 设置规格，设置购买数量，重新计算页面价格
						$("input[id='product_price']").val(json.productPrice);
						$("span[id='spec_json']").text(JSON.stringify(spec));
						$("li[item_id='"+item_id+"']").find("#v_buy_num").val(buy_num);
						var tmpMoney = json.productPrice; 
						$("li[item_id='"+item_id+"']").find("h4").html("￥<em>"+numberInteger(tmpMoney)+"</em>"+numberDecimal(tmpMoney));
						
						// 计算页面购物车金额
						var total_shopping_cart_money = 0.0;
						$("b[name='shopping_num']").each(function(){
							var item_id = $(this).find("#item_id").val();
							if ($("i[product_id='"+item_id+"']").hasClass("current")) {
								var product_price = parseFloat($(this).find("#product_price").val());
								var buyNum = parseFloat($(this).find("#v_buy_num").val());
								var total_product_price = product_price * buyNum;
								total_shopping_cart_money = total_shopping_cart_money + total_product_price;
							}
						});
						var tmpMoney =numberRand2(total_shopping_cart_money);
						$("#shopping_cart_total_money").html("￥<i>"+numberInteger(tmpMoney)+"</i>"+numberDecimal(tmpMoney));
						$("#goods_editbox").toggle();
					}
				},
				error : function() {
					layer.msg('修改购物车失败',{time:1000});
				}
			});
			
		});
		
		
		// 结算
		$("#btn_settlement").click(function(){
			// 判断用户是否登录
			var url = rootPath + "/home/checkLogin";
			$.ajax({
				type : "post",
				url : url,
				data : {},
				datatype : "json",
				success : function(json) {
					if (json.resultCode == '1') {
						// 用户已经登录
						// 结算选中的商品
						var selectedNum = $("i[product_id].current").length;
						if(selectedNum == 0){
							layer.msg('请选择要结算的商品',{time:1000});
							return false;
						}
						var ids = [];
						$("i[product_id].current").each(function(){
							ids.push($(this).attr("product_id"));
						});
						idsStr = '';
						idsStr = ids.join(",");
						
						var url = rootPath + "/wx/shoppingcart/settlement";
						var form = $('<form></form>');  
					    form.attr('action', url);  
					    form.attr('method', 'post');
					    form.attr('target', '_self');
					    form.append("<input type='hidden' name='shoppingIds' value='"+idsStr+"'/>");
					    form.appendTo("body");
					    form.submit();
						
					}else{
						// 弹出登录窗口
						$('#myloginbox').toggle();
					}
				},
				error : function() {
					layer.msg('判断登录失败',{time:1000});
				}
			});
		});
		
	});
</script>
</head>
<body style="background: #f5f5f5">
	<c:set var="rootPath" value="<%=basePath %>"></c:set>
	<c:set var="imgRootURL" value="<%=imgRootURL %>"></c:set>
	<c:set var="ossImgZoomWX" value="<%=ossImgZoomWX %>"></c:set>
	
	<c:if test="${shoppingcart.size() == 0 }">
	<div class="noresult">
		<p>
			<i><img src="${rootPath}/statics_wx/images/icon_nocart.png" /></i> <span>当前暂无商品</span>
		</p>
	</div>
	</c:if>
	
	<%--商品规格修改弹层 --%>
	<div class="cart_page">
		<div class="overlay" id="goods_editbox" style="display: none">
			<div class="goods_editbox">
				<a id="btn_close_product_spec" href="javascript:void(0)" class="icon_close"></a>
				<input type="hidden"  id="tmp_item_id" value=""/>
				<input type="hidden"  id="tmp_product_id" value=""/>
				<%--商品基价 --%>
				<input type="hidden"  id="tmp_product_base_price" value=""/>
				<div class="goods_editbox_con">
					<div class="good_info1">
						<div class="pic">
							<img id="tmp_product_image" src="" />
						</div>
						<div class="item-info">
							<h2 id="tmp_product_name"></h2>
							<h3 id="tmp_product_price"></h3>
						</div>
					</div>
					<div id="spec_container" class="good_info2">
					</div>
					<div class="good_info3">
						<strong>数量</strong>
						<div class="txt1">
							<b> <a href="javascript:void(0)" id="btn_reduce_buy_num_2" class="icon_jian_gray"></a> 
								<span><input id="v_buy_num_2" type="text" value="1"></span>
								<a href="javascript:void(0)" id="btn_add_buy_num_2" class="icon_jia"></a>
							</b>
						</div>
					</div>
				</div>
				<div class="bottom">
					<p>
						<input type="button" id="btn_modify_product_spec" class="inputbtn1" value="确定" />
					</p>
				</div>
			</div>
		</div>
		
		
		<%--赠品弹层 --%>
		<div class="overlay" id="cx_box" style="display: none">
			<div class="zp_box">
				<div class="hd">
					<h3>促销</h3>
				</div>
				<div class="bd">
					<div class="cx_list">
						<ul>
							<li><em id="promotion_type">
								
								</em>
								<p id="promotion_desc">
									
								</p>
							</li>
						</ul>
					</div>
				</div>
				<div class="bottom">
					<p>
						<input type="button" class="inputbtn1" value="确定" />
					</p>
				</div>
			</div>
		</div>
		
		
		<%--赠品弹层 --%>
		<div class="overlay" id="zp_box" style="display: none">
			<div class="zp_box">
				<div class="hd">
					<h3>赠品</h3>
				</div>
				<div class="bd">
					<div class="zp_list">
						<ul>
							<li>
								<p id="gift_list">
								
								</p>
							</li>
						</ul>
					</div>
				</div>
				<div class="bottom">
					<p>
						<input type="button" class="inputbtn1" value="确定" />
					</p>
				</div>
			</div>
		</div>
		
		<%--购物车商品列表 --%>
		<div class="cart_wrap">
			<div class="hd">
				<h3>景旭商城</h3>
				<span> <a href="javascript:void(0)" class="a1" id="editbtn">编辑</a>
					<a href="javascript:void(0)" class="a2" id="donebtn">完成</a>
				</span>
			</div>
			<%--购物车商品列表循环开始 --%>
			<c:forEach items="${shoppingcart}" var="product">
			
			<div class="bd">
				<c:if test="${product.promotionTypeName != null }">
				<div class="hd_part">
					<a href="javascript:void(0)" class="cx_btn">
						<div class="hd_part_con">
							<p id="promotion_desc">
								<em>${product.promotionTypeName }</em><b>${product.promotionDesc}</b>
							</p>
							<strong><i></i></strong>
						</div>
					</a>
				</div>
				</c:if>
				<div class="cart_item_con">
					<div class="cart_item_con1">
						<ul>
							<li item_id="${product.id}" >
								<div class="box3">
									<i product_id="${product.id}" class="current"></i>
									<div class="box3_con">
										<div class="pic">
											<a href="${rootPath}/wx/product/detail?productId=${product.productId}"><img src="${imgRootURL}/${product.imagePath}${ossImgZoomWX}"></a>
										</div>
										<div class="item-info">
											<h2>
												<a href="${rootPath}/wx/product/detail?productId=${product.productId}">${product.productName }</a>
											</h2>
											<h3 id="product_spec_show">
												<input type="hidden"  id="item_id"  value="${product.id}"/>
												<input type="hidden"  id="product_id"  value="${product.productId}"/>
												<input type="hidden"  id="product_name"  value="${product.productName}"/>
												<span id="spec_json" style="display:none;" >${product.productSpec}</span>
												<input type="hidden"  id="product_base_price"  value="${product.productBasePrice}"/>
												<input type="hidden"  id="product_price"  value="${product.productPrice}"/>
												<input type="hidden"  id="product_image"  value="${product.imagePath}"/>
												
												<%--多个规格项合并成一个展示，编辑时可以弹层，修改多个编辑项 --%>
												<span>
													<u>
													<c:forEach items="${product.specList}" var="spec" varStatus="ind">
														${spec.specName }:${spec.specValue}&nbsp;
													</c:forEach>
													</u>
												</span><s></s>
											</h3>
											<h4>
												￥<em><sl:nformat num="${product.productPrice}" format=".00" type="2"/></em>
													  <sl:nformat num="${product.productPrice}" format=".00" type="3"/>
											</h4>
											<h5>
												<b name="shopping_num"> 
													<input type="hidden"  id="item_id"  value="${product.id}"/>
													<input type="hidden"  id="product_id"  value="${product.productId}"/>
													<input type="hidden"  id="product_price"  value="${product.productPrice}"/>
													<a href="javascript:void(0)" flag="reduce" class="edit_buy_num icon_jian_gray"></a>
													<span>
														<input type="text" id="v_buy_num" value="${product.buyNum }" readonly>
													</span>
													<a href="javascript:void(0)" flag="add"  class="edit_buy_num icon_jia"></a>
												</b>
											</h5>
										</div>
									</div>
								</div>
							</li>
							
							<c:if test="${product.giftList != null && product.giftList.size() > 0}">
							<div class="zp_part">
								<a href="javascript:void(0)" class="zp_btn">
									<div class="zp_part_con">
										<p>
											<em>赠品</em><b id="gift_list_str">
												<c:forEach items="${product.giftList}" var="gift">
													<c:if test="${gift.giftType == '1' }">
														${gift.productName} X 1 ;<br/>
													</c:if>
													<c:if test="${gift.giftType == '2' }">
														${gift.coupon} 优惠券 X 1  (有效期：2018-02-02) ;<br/>
													</c:if>
													<c:if test="${gift.giftType == '3' }">
														${gift.points} 积分 ;<br/>
													</c:if>
												</c:forEach>
											</b>
										</p>
										<strong> <span>x1</span><i></i>
										</strong>
									</div>
								</a>
							</div>
							</c:if>
						</ul>
					</div>
				</div>
			</div>
			</c:forEach>
			<%--购物车商品列表循环结束 --%>
		</div>
		
		<div class="footerfixed2"></div>
		<div class="cart_bottom2">
			<div class="cart_bottom2_con">
				<label><i id="btn_select_all"  class="current"></i><span>全选</span></label>
				<p>
					<strong>合计：<em id="shopping_cart_total_money">¥<i><sl:nformat num="${totalPrice}" type="2" format="#.00"/></i><sl:nformat num="${totalPrice}" type="3" format="#.00"/>
					</em></strong>
				</p>
				<b><a id="btn_settlement" href="javascript:void(0)" class="btn3 a11">去结算</a> 
					<a id="btn_delete" href="javascript:void(0)" class="btn3 a12">删除</a> </b>
			</div>
		</div>
	</div>
	<jsp:include page="../wx_footer.jsp" />
</body>
</html>